<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="referrer" content="never">
        <title>首页</title>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="vendors/linericon/style.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
        <link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
        <link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
        <link rel="stylesheet" href="vendors/animate-css/animate.css">
        <!-- main css -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/responsive.css">
    </head>
    <body>
        <div id="index">
        <!--================Header Menu Area =================-->
        <header class="header_area">
            <div class="main_menu">
            	<nav class="navbar navbar-expand-lg navbar-light">
					<div class="container box_1620">
						<!-- Brand and toggle get grouped for better mobile display -->
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
							<input v-model="search" style="width:250px;background:transparent;border:none #FFFFFF;border-bottom:#777777 solid 1px;color:white;" placeholder="请输入查询电影">
							<a :href="'list.jsp?email='+user.email+'&nackname='+user.nickname+'&m_name='+search" class="search"><i class="lnr lnr-magnifier"></i></a>
							<ul class="nav navbar-nav menu_nav ml-auto">
								<li class="nav-item active"><a class="nav-link" href="index.jsp">首页</a></li> 
								<li class="nav-item"><a href="javascript:void(0);" class="nav-link" v-on:click="guess">猜你喜欢</a></li> 
								<li class="nav-item submenu dropdown">
									<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">榜单</a>
									<ul class="dropdown-menu">
										<li class="nav-item"><a class="nav-link" :href="'list.jsp?email='+user.email+'&nickname='+user.nickname+'&sortType=rateFirst'">高分榜单</a>
										<li class="nav-item"><a class="nav-link" :href="'list.jsp?email='+user.email+'&nickname='+user.nickname+'&sortType=mostSee'">最热榜单</a> 
									</ul>
								</li> 
								<li class="nav-item"><a class="nav-link" :href="'chat.jsp?email='+user.email+'&nickname='+user.nickname">人工智能</a></li>
							</ul>
							
							<ul class="nav navbar-nav navbar-right">
								<li class="nav-item">
								<button v-if="user.email!=''" class="tickets_btn" style="border:0px;">{{user.nickname}}</button>
								<button v-else @click="sign" class="tickets_btn" style="border:0px;">登录</button>
								</li>
							</ul>
						</div> 
					</div>
            	</nav>
            </div>
        </header>
        <!--================Header Menu Area =================-->
        
        <!--================Home Banner Area =================-->
        <section class="home_banner_area"  >
            <div class="banner_inner">
				<div class="container">
					<div class="banner_content">
						<h2>××电影</h2>
						<p></p>
						<a class="banner_btn" :href="'list.jsp?email='+user.email+'&nickname='+user.nickname+'&sortType=default'">查看更多</a>
					</div>
				</div>
            </div>
        </section>
        <!--================End Home Banner Area =================-->
        
        
        
        <!--================menu =================-->
        <section class="welcome_area pad_btm" style="margin-top:100px">
        	<div class="container">
        		<div class="welcome_inner row">
        			<div class="col-lg-5">
        				<div class="welcome_img">
        					<img class="img-fluid" :src="movie_score.src" alt="">
        				</div>
        			</div>
        			<div class="col-lg-6 offset-lg-1">
        				<div class="welcome_text">
        					<h3>高分榜单</h3>
        					<p>该榜单集合了全部电影中评分较高的电影，这部分电影凭借自身的魅力获得了大部分观众的认可。</p>
        					<p>榜单规则：按照每部电影获得的评分平均分进行排序</p>
        					<a class="main_btn" :href="'list.jsp?email='+user.email+'&nickname='+user.nickname+'&sortType=rateFirst'">查看更多</a>
        				</div>
        			</div>
        		</div>
        	</div>
        </section>
        <section class="welcome_area pad_btm" style="margin-top:60px">
        	<div class="container">
        		<div class="welcome_inner row">
        			<div class="col-lg-5">
        				<div class="welcome_text">
        					<h3>热度榜单</h3>
        					<p>该榜单包含了全部电影中热度较高的电影，这部分电影最近得到了很多人的关注。</p>
        					<p>榜单规则：按照某段时间内电影得到的评价数或评分数进行排序。</p>
        					<a class="main_btn" :href="'list.jsp?email='+user.email+'&nickname='+user.nickname+'&sortType=mostSee'">查看更多</a>
        				</div>
        			</div>
        			<div class="col-lg-6 offset-lg-1">
        				<div class="welcome_img">
        					<img class="img-fluid" :src="movie_hot.src" alt="">
        				</div>
        			</div>
        		</div>
        	</div>
        </section>
        
        
		</div>
		<!--================ footer Area  =================-->	
        <footer class="footer-area p_120">
            <div class="container" style="text-align:center;">
                    <p class="col-lg-8 col-md-8 footer-text m-0">
						Copyright &copy;<script>document.write(new Date().getFullYear());</script> 在家工作小组 All rights reserved
					</p>
            </div>
        </footer>
		
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/popper.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/stellar.js"></script>
        <script src="vendors/lightbox/simpleLightbox.min.js"></script>
        <script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
        <script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
        <script src="vendors/isotope/isotope-min.js"></script>
        <script src="vendors/owl-carousel/owl.carousel.min.js"></script>
        <script src="js/jquery.ajaxchimp.min.js"></script>
        <script src="vendors/flipclock/timer.js"></script>
        <script src="vendors/counter-up/jquery.waypoints.min.js"></script>
        <script src="vendors/counter-up/jquery.counterup.js"></script>
        <script src="js/mail-script.js"></script>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        
        <!--gmaps Js-->
        
        <script src="js/gmaps.min.js"></script>
        <script src="js/theme.js"></script>
        <%
        String nickname="\""+request.getParameter("nickname")+"\"";
        String email="\""+request.getParameter("email")+"\"";
        %>
        <script>
        
        	
        	var user=new Vue({
        		el:'#index',
        		data:{
        			user:{
        				nickname:null,
        				email:null
        			},
        			search:"",
        			movie_score:{
        				name:"",
        				id:"",
        				src:""
        			},
        			movie_hot:{
        				name:"",
        				id:"",
        				src:""
        			}
        		},
        		created:function(){
        			
        			this.user.nickname=<%=nickname%>;
        			this.user.email=<%=email%>;
        			this.search="";
        			console.log("email");
        			console.log(this.user.email);
        			if(this.user.email.indexOf("@")==-1){
        				alert("请先登录");
        				window.location.href='sign.jsp';
        			}
        			$.ajax({
            			type:"GET",
            			url:"http://27x31799n7.zicp.vip/loadPage?email="+this.user.email+"&sortType=",
            			dataType:"JSON",
            			success:function(data){
            				this.movie_score.name=data.name;
            				this.movie_score.id=data.id;
            				this.movie_score.src=data.src;
            			}
            		})
            		$.ajax({
            			type:"GET",
            			url:"http://27x31799n7.zicp.vip/loadPage?email="+this.user.email+"&sortType=",
            			dataType:"JSON",
            			success:function(data){
            				this.movie_hot.name=data.name;
            				this.movie_score.id=data.id;
            				this.movie_hot.src=data.src;
            			}
            		})
            		
        		},
        		methods:{
        			guess:function(){
        				window.location.href='guess.jsp?email='+this.user.email+'nickname='+this.user.nickname;
        			},
        			sign:function(){
        				window.location.href='sign.jsp';
        			}
        		}
        	})
        	
        	
        	
        </script>
        
    </body>
</html>